<template>
  <div class="city">
    <van-search
      v-model="searchVal"
      placeholder="城市/区域/位置"
      shape="round"
      show-action
      @cancel="cancelBack"
    />
    <van-tabs v-model:active="tabActive" color="#ff9854">
      <template v-for="(value, key, index) in allCities" :key="key">
        <van-tab :title="value.title" :name="key"></van-tab>
      </template>
    </van-tabs>
    <div class="city_content">
      <template v-for="(value, key, index) in allCities">
        <city-group v-show="tabActive === key" :cityData="value" />
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import useCityStore from "@/stores/modeules/city";
import CityGroup from "./cpns/city_group.vue";
const router = useRouter();
const searchVal = ref("");
const tabActive = ref(0); //切换栏下标

//取消后返回
const cancelBack = () => {
  router.back();
};

//城市数据请求
const cityStore = useCityStore();
cityStore.fetchAllCities(); //调取actions方法
const { allCities } = storeToRefs(cityStore); //拿到赋值的数据

//根据key值获取城市内数据
const currentGroup = computed(() => allCities.value[tabActive.value]);
</script>

<style scoped lang="scss">
.city {
  .city_content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }
}
</style>
